<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>列表页</title>

</head>

<body>

      <div class="header container">
            <span>列表页</span>
            <p class="active">
                  <a href="./index.html">返回首页</a>
            </p>
      </div>

      <div class="box container">
            <div class="item">
                  <p>分类</p>
                  <ul class="cate">
                        <!-- JS 渲染 -->
                        <li>手机</li>
                        <li>手机</li>
                        <li>手机</li>
                        <li>手机</li>
                        <li>手机</li>
                        <li>手机</li>
                  </ul>
            </div>
            <div class="item">
                  <p>筛选</p>
                  <ul class="filter">
                        <li data-type="" class="active">全部</li>
                        <li data-type="hot">热销</li>
                        <li data-type="sale">折扣</li>
                  </ul>
            </div>
            <div class="item">
                  <p>折扣</p>
                  <ul class="sale">
                        <li data-type="10" class="active">全部</li>
                        <li data-type="5">5</li>
                        <li data-type="6">6</li>
                        <li data-type="7">7</li>
                        <li data-type="8">8</li>
                        <li data-type="9">9</li>
                  </ul>
            </div>
            <div class="item">
                  <p>排序</p>
                  <ul class="sort">
                        <li data-type="id" data-method="ASC" class="active">综合升序</li>
                        <li data-type="id" data-method="DESC">综合降序</li>
                        <li data-type="price" data-method="ASC">价格升序</li>
                        <li data-type="price" data-method="DESC">价格降序</li>
                        <li data-type="sale" data-method="ASC">折扣升序</li>
                        <li data-type="sale" data-method="DESC">折扣降序</li>
                  </ul>
            </div>
            <div class="item">
                  <p>搜索</p>
                  <ul>
                        <input class="search" type="text">
                  </ul>
            </div>
            <div class="item pagination">
                  <p>分页</p>
                  <div>
                        <span class="left disable">&lt;</span>
                        <span>1 / 10</span>
                        <span class="right">&gt;</span>
                  </div>
                  <select>
                        <option value="12">12</option>
                        <option value="16">16</option>
                        <option value="20">20</option>
                        <option value="24">24</option>
                  </select>
                  <input type="text" value="1">
                  <button>跳转</button>
            </div>
      </div>

      <ul class="content container">
            <li>
                  <div class="show">
                        <img src="#" alt="">
                        <span class="hot active">热销</span>
                        <span class="sale active">折扣</span>
                  </div>
                  <div class="info">
                        <p class="title">sdfkjkhasdfjghsd圣诞节分公司交付给是刚发的古生代够浮点数公费师范广东省分公司的集合返回计算 交互的发过火规范的股份 </p>
                        <p class="price">
                              <span class="current">￥ 100.00</span>
                              <span class="old">￥ 100.00</span>
                        </p>
                        <button>加入购物车</button>
                  </div>
            </li>
      </ul>

      <div id="wen">
            <div class="wen_heart">
                  <ul class="wen_top">
                        <li>
                              <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm">
                                    <img src="	https://image.suning.cn/uimg/cms/img/149386338830969041.jpg" alt="">
                              </a>
                              <div>
                                    <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"
                                          style="    text-decoration: none;">
                                          <p class="wen_p">正品保障</p>
                                    </a>
                                    <p class="wen_p1">正品保障、提供发票</p>
                              </div>
                        </li>
                        <li>
                              <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm">
                                    <img src="https://image.suning.cn/uimg/cms/img/149386339441846551.jpg" alt="">
                              </a>
                              <div>
                                    <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"
                                          style="    text-decoration: none;">
                                          <p class="wen_p">急速物流</p>
                                    </a>
                                    <p class="wen_p1">如约送货、送货入户</p>
                              </div>
                        </li>
                        <li>
                              <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm">
                                    <img src="https://image.suning.cn/uimg/cms/img/149386340040069121.jpg" alt="">
                              </a>
                              <div>
                                    <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"
                                          style="    text-decoration: none;">
                                          <p class="wen_p">售后无忧</p>
                                    </a>
                                    <p class="wen_p1">30天包退、365天包换</p>
                              </div>
                        </li>
                        <li>
                              <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm">
                                    <img src="https://image.suning.cn/uimg/cms/img/149386341371637387.jpg" alt="">
                              </a>
                              <div>
                                    <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"
                                          style="    text-decoration: none;">
                                          <p class="wen_p">帮助中心</p>
                                    </a>
                                    <p class="wen_p1">你的购物指南</p>
                              </div>
                        </li>
                        <li>
                              <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm">
                                    <img src="https://image.suning.cn/uimg/cms/img/159609703272398060.png" alt="">
                              </a>
                              <div>
                                    <a href="https://hc.suning.com/help/channel-153317984655227247/K15399193697723000.htm"
                                          style="    text-decoration: none;">
                                          <p class="wen_p">省心购</p>
                                    </a>
                                    <p class="wen_p1">专注好服务</p>
                              </div>
                        </li>
                  </ul>
                  <div class="wen_footer">
                        <div class="wen_left">
                              <ul>
                                    <p>购物指南</p>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>免费注册</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>会员等级</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>常见问题</li>
                                    </a>
                              </ul>
                              <ul>
                                    <p>支付方式</p>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>苏宁支付</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>网购支付</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>快捷方式</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>分期付款</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>货到付款</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>任性付支付</li>
                                    </a>
                              </ul>
                              <ul>
                                    <p>物流配送</p>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>运费政策</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>物流配送服务</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>签收验证</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>物流查询</li>
                                    </a>
                              </ul>
                              <ul>
                                    <p>售后服务</p>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>退换货政策</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>贵就卖</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>维修/安装</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>订单修改</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>退换货申请</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>我的发票</li>
                                    </a>
                              </ul>
                              <ul>
                                    <p>商家服务</p>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>合作招商</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>培训中心</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>广告服务</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>商家帮助</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>服务市场</li>
                                    </a>
                                    <a
                                          href="https://hc.suning.com/help/channel-153319832238928527/K15363027314437540.htm">
                                          <li>规则中心</li>
                                    </a>
                              </ul>
                        </div>
                        <div class="wen_right">
                              <ul>
                                    <p>购物指南</p>
                                    <li>
                                          全国300多个城市，上万个门店和服务终端期待您的光临，为您提供贴心的服务！
                                    </li>
                              </ul>
                        </div>
                  </div>
            </div>
      </div>
      <!-- 最后 -->
      <div id="footer">
            <div class="footer_heart">
                  <p>爱上对方过后就哭了</p>
            </div>
      </div>


</body>

</html>